<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航插件鼠标滑过背景悬停flash动画效果</title>
<meta name="description" content="jquery导航插件制作6种鼠标滑过背景悬停效果，通过鼠标滑过导航条标签悬停背景图片flash动画过渡效果展示。这是一款非常实用的jQuery导航插件。" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:680px;margin:20px auto 0 auto;}
.demo h1{font-size:22px;}
.demo h2{font-size:16px;padding:30px 0 10px 0;}
/* navbox */
.navbox{height:32px;overflow:hidden;}
.navbox li{float:left;width:100px;text-align:center;}
.navbox li a{display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;font-size:14px;font-weight:800;}
.navbox li a{background:url(images/bg2.jpg) repeat 0 0;}
.navbox li a:hover,.navbox li a:focus,.navbox li a:active{background-position:-150px 0;}
#a a{background:url(images/bg.jpg) repeat -20px 35px;}
#b a{background:url(images/bg2.jpg) repeat 0 0;}
#c a{background:url(images/bg3.jpg) repeat 0 0;}
#d a{background:url(images/bg4.jpg) repeat 0 0;}
/* navTag */
.navTag{width:680px;margin:20px auto;background:url(images/bmid_111.gif) repeat-x;height:62px;}
.navTag li{float:left;}
.navTag a{background:url(images/bright_111.gif) no-repeat right top;text-decoration:none;display:block;float:left;}
.navTag a span{display:block;background:url(images/bleft_111.gif) no-repeat left top;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#FFF;font-weight:700;line-height:62px;padding:0 25px;}
.navTag a:hover{background-position:right bottom;}
.navTag a:hover span{background-position:left bottom;color:#FFF;font-weight:700;font-style:normal;text-decoration:none;}
</style>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>

<script type="text/javascript">
$(function(){
	
	//实例2: 自顶向下
	$("#a a").css({backgroundPosition: "-20px 35px"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(-20px 94px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(40px 35px)"
		},{duration:200, complete:function(){
			$(this).css({backgroundPosition: "-20px 35px"})
		}})
	})
	
	//实例3: 右左
	$('#b a').css({backgroundPosition:"0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(-150px 0)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(-300px 0)"
		},{duration:200,complete:function(){
			$(this).css({backgroundPosition: "0 0"})
		}})
	})
	
	//实例4: 淡出淡入
	$('#c a').css({backgroundPosition:"0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -250px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 0)"
		},{duration:500})
	})
	
	//实例5: 淡出淡入颜色	
	$('#d a').css({backgroundPosition: "0 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -250px)"
		},{duration:500})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 0)"
		},{duration:500})
	})
	
	//实例6: 背景折叠动画效果
	$(".navTag a").css({backgroundPosition: "right 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(right -62px)"
		},{duration:400})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(right 0)"
		},{duration:400})
	})
	$(".navTag a span").css({backgroundPosition:"left 0"}).mouseover(function(){
		$(this).stop().animate({
			backgroundPosition:"(0 -62px)"
		},{duration:400})
	}).mouseout(function(){
		$(this).stop().animate({
			backgroundPosition:"(left 0)"
		},{duration:400})
	})
	
});
</script>

</head>
<body>

	<div class="demo">
		<h1>jQuery的背景位置</h1>
		
		<h2>实例1: 无脚本</h2>
		<ul class="navbox" id="noscript">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<h2>实例2: 自顶向下</h2>
		<ul class="navbox" id="a">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<h2>实例3: 右左</h2>
		<ul class="navbox" id="b">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<h2>实例4: 淡出淡入</h2>
		<ul class="navbox" id="c">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<h2>实例5: 淡出淡入颜色</h2>
		<ul class="navbox" id="d">
			<li><a href="#">网站首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">公司介绍</a></li>
			<li><a href="#">产品展示</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
		
		<h2>实例6: 背景折叠动画效果</h2>
	</div>
	
	<div class="navTag">
		<ul>
	
			<li><a href="#"><span>Home</span></a></li>
			<li><a href="#"><span>About</span></a></li>
			<li><a href="#"><span>Contact</span></a></li>
		</ul>
	</div>
	
</body>
</html>